@charset "utf-8";

.banner{ max-height: 815px;}

.index{ width: 100%;}

.btn .btn_in{ display: inline-block; padding-right: 24px; height: 100%; line-height: 50px; background: url('../images/btn_icon.png') no-repeat center right; font-size: 16px; color: #000; font-family: Poppins-Regular; text-transform: uppercase;}

.index_top{ display: flex; justify-content: space-between; margin: 0 auto; padding: 120px 0; width: 1440px;}
.index_top .left{ display: flex; align-items: center; width: 53.4722%;}
.index_top .left .content{ width: 100%;}
.index_top .left .content .title{ width: 100%; line-height: 64px; height: 128px; font-size: 48px; color: #333; font-family: Poppins-Regular; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.index_top .left .content .brief{ margin-top: 26px; width: 100%; line-height: 40px; font-size: 16px; color: #555;}
.index_top .left .content .btn{ display: block; margin-top: 86px; width: 195px; height: 50px; background: #fde628; text-align: center;}
.index_top .right{ display: flex; justify-content: center; align-items: center; width: 38.6806%;}
.index_top .right .img_a{ display: block; position: relative; overflow: hidden;}
.index_top .right .img_a img{ -webkit-transition: all 0.3s; transition: all 0.3s;}
.index_top .right .img_a:hover img{ -webkit-transform: scale(1.1); transform: scale(1.1);}
.index_top .right .img_a:before{ display: block; content: ''; position: absolute; left: 50%; top: 50%; width: 93px; height: 93px; border: 2px solid #fff; background: url('../images/play_icon.png') no-repeat center; z-index: 1; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.index_mid .img_list{ width: 100%;}
.index_mid .img_list .img_item{ display: block; position: relative; width: 50%; text-decoration: none; font-size: 0; text-align: center; overflow: hidden;}
.index_mid .img_list .img_item img{ -webkit-transition: all 0.5s; transition: all 0.5s;}
.index_mid .img_list .img_item:hover img{ -webkit-transform: scale(1.1); transform: scale(1.1);}
.index_mid .img_list .img_item .content{ display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.index_mid .img_list .img_item .content .content_in{ text-align: center;}
.index_mid .img_list .img_item .content .title{ display: block; width: 100%; height: 46px; line-height: 46px; font-size: 36px; color: #fff; font-family: Poppins-Regular; text-align: center;}
.index_mid .img_list .img_item .content .btn{ display: inline-block; margin-top: 15px; height: 20px; line-height: 20px; border-bottom: 1px solid #a9a8a9; font-size: 14px; color: #fff; text-transform: uppercase;}

.index_pro{ padding: 110px 0; width: 100%; max-width: 1440px;}
.index_pro .toptitle{ width: 100%; height: 46px; line-height: 46px; font-size: 38px; color: #333; font-family: Poppins-Regular; font-weight: bold; text-align: center;}
.index_pro .indprolist{ display: grid; grid-template-columns: repeat(4, 22.9861%); grid-gap: 77px 2.6389%; margin-top: 107px; width: 100%;}
.index_pro .indprolist .item{ width: 100%;}
.index_pro .indprolist .item .pic{ display: flex; justify-content: center; align-items: center; height: 331px; -webkit-transition: all 0.5s; transition: all 0.5s;}
.index_pro .indprolist .item .name{ margin-top: 18px; width: 100%; height: 32px;}
.index_pro .indprolist .item .name a{ display: block; width: 100%; height: 100%; line-height: 32px; font-size: 16px; color: #333; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}
.index_pro .indprolist .item:hover .pic{ box-shadow: 0 0 32px rgba(0, 0, 0, 0.07);}
.index_pro .btn{ display: block; margin: 105px auto 0; width: 281px; height: 59px;  border: 2px solid #000; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box;}
.index_pro .btn .btn_in{ line-height: 59px;}

.index_info{ padding: 78px 0 115px; width: 100%; background: #f9f9f9;}
.index_info .info_in{ margin: 0 auto; max-width: 1440px;}
.index_info .info_in .toptitle{ width: 100%; height: 46px; line-height: 46px; font-size: 38px; color: #333; font-family: Poppins-Regular; font-weight: bold; text-align: center;}
.index_info .info_in .info_list{ margin-top: 78px; display: flex; justify-content: center;}
.index_info .info_in .info_list .info_item{ padding-bottom: 103px; width: 33.3333%; background: #fff;}
.index_info .info_in .info_list .info_item:nth-child(2){ background: #efeeed;}
.index_info .info_in .info_list .info_item .date{ margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 166px; height: 164px; background: #cfcbc7; -webkit-transition: all 0.3s; transition: all 0.3s;}
.index_info .info_in .info_list .info_item .date .month{ position: relative; width: 100%; height: 54px; line-height: 54px; font-size: 20px; color: #fff; font-family: Poppins-Regular; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;}
.index_info .info_in .info_list .info_item .date .month:before{ display: block; content: '';  position: absolute; left: 50%; bottom: 0; width: 19px; height: 1px; background: #fff; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.3s; transition: all 0.3s;}
.index_info .info_in .info_list .info_item .date .day{ width: 100%; height: 88px; line-height: 88px; font-size: 60px; color: #fff; font-family: Poppins-Regular; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s;}
.index_info .info_in .info_list .info_item .title{ margin: 34px auto 0; width: 81.25%; height: 35px; line-height: 35px; font-size: 22px; color: #333; font-family: Poppins-Regular; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.index_info .info_in .info_list .info_item .brief{ margin: 27px auto 0; width: 81.25%; height: 171px; line-height: 35px; font-size: 16px; color: #555; font-family: Poppins-Regular; text-align: center; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}
.index_info .info_in .info_list .info_item .btn{ display: block; margin: 50px auto 0; width: 195px; height: 55px;  border: 2px solid #000; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s;}
.index_info .info_in .info_list .info_item .btn .btn_in{ line-height: 55px;}

.index_info .info_in .info_list .info_item:hover .date{ background: #ffe630;}
.index_info .info_in .info_list .info_item:hover .date .month,
.index_info .info_in .info_list .info_item:hover .date .day{ color: #000;}
.index_info .info_in .info_list .info_item:hover .date .month:before{ background: #000;}
.index_info .info_in .info_list .info_item:hover .btn{ background: #ffe630; border-color: #ffe630;}

@media screen and (max-width: 1460px){
	.index_top{ width: 95%;}

	.index_pro{ padding: 110px 20px;}
}

@media screen and (max-width: 850px){
	.index_top{ flex-wrap: wrap; flex-direction: column-reverse;}
	.index_top .left{ width: 100%;}
	.index_top .left .content{ margin-top: 50px; text-align: center;}
	.index_top .left .content .btn{ margin: 30px auto 0;}
	.index_top .right{ width: 100%;}
	.index_mid .img_list .img_item{ width: 100%;}
}

@media screen and (max-width: 750px){
	.btn .btn_in{ padding-right: 3.2vw; line-height: 13.3333vw; background: url(../images/btn_icon.png) no-repeat center right / 1.2vw 2.0vw; font-size: 4vw;}
	.index_top{ padding: 10vw 0;}
	.index_top .left .content{ margin-top: 6.6667vw;}
	.index_top .left .content .title{ height: 17.0667vw; line-height: 8.5333vw; font-size: 6.4vw;}
	.index_top .left .content .brief{ margin-top: 3.4667vw; line-height: 5.3333vw; font-size: 4vw;}
	.index_top .left .content .btn{ margin: 4.0vw auto; width: 52.0vw; height: 13.3333vw;}
	.index_top .right .img_a:before{ width: 12.4vw; height: 12.4vw; background: url(../images/play_icon.png) no-repeat center / 2.4vw 2.8vw;}

	.index_mid .img_list .img_item .content .title{ height: 6.1333vw; line-height: 6.1333vw; font-size: 4.8vw;}
	.index_mid .img_list .img_item .content .btn{ margin-top: 2.0vw; height: 4.6667vw; line-height: 4.6667vw; font-size: 4.0vw;}

	.index_pro{ padding: 10.6667vw 2.6667vw;}
	.index_pro .toptitle{ height: 6.1333vw; line-height: 6.1333vw; font-size: 6.4vw;}
	.index_pro .indprolist{ grid-template-columns: repeat(2, 48.7%); grid-gap: 5.2667vw 2.6389%; margin-top: 10.2667vw;}
	.index_pro .indprolist .item .pic{ height: 44.1333vw;}
	.index_pro .indprolist .item .name{ margin-top: 2.4vw; height: 4vw;}
	.index_pro .indprolist .item .name a{ line-height: 4vw; font-size: 4vw;}

	.index_info .info_in .info_list{ flex-wrap: wrap;}
	.index_info .info_in .info_list .info_item{ width: 100%;}

	.index_pro .btn{ margin: 10vw auto 0; width: 52.0vw; height: 13.3333vw; border-width: 0.2667vw;}
	.index_pro .btn .btn_in{ line-height: 13.3333vw;}

	.index_info{ padding: 10.4vw 0 10.3333vw;}
	.index_info .info_in .toptitle{ height: 6.1333vw; line-height: 6.1333vw; font-size: 6.4vw;}
	.index_info .info_in .info_list{ margin: 10.4vw auto 0; width: 95%;}
	.index_info .info_in .info_list .info_item{ margin-top: 2.6667vw; padding-bottom: 10.7333vw;}
	.index_info .info_in .info_list .info_item:first-child{ margin-top: 0;}
	.index_info .info_in .info_list .info_item .title{ margin: 4.5333vw auto 0; height: 4.6667vw; line-height: 4.6667vw; font-size: 4vw;}
	.index_info .info_in .info_list .info_item .brief{ margin: 3.6vw auto 0; height: 22.8vw; line-height: 4.6667vw; font-size: 3.3333vw;}
	.index_info .info_in .info_list .info_item .btn{ margin: 6.6667vw auto 0; width: 52.0vw; height: 13.3333vw; border-width: 0.2667vw;}
	.index_info .info_in .info_list .info_item .btn .btn_in{ line-height: 13.3333vw;}
}